
<script>
    
    $('document').ready(function(){
        getAllAdmins();
    });
    
    function sendRequest(u){
        // Send request to server
        //u a url as a string
        //async is type of request
                                
        var obj=$.ajax({url:u,async:false});

        //Convert the JSON string to object
        var result=$.parseJSON(obj.responseText);
        return result;	//return object
    }
    
    function liveSearch(str){
        
        if(str.length == 0){
            $("#livesearch").text("");
            return;
        }
        
        var obj = sendRequest("adminFunctions.php?cmd=6&st="+str);
        if(obj.result == 1){
            displayAdmin(obj);
        }else if(obj.result == 0){
            $('#livesearch').text(obj.result);
        }
    }
    
    function displayAdmin(obj){
        var i = 0;
        var table = '<div id="divContent">';
        table += '<table id="tableExample" class="reportTable"><tbody>';
        table += "<tr class='header'><th>First Name</th><th>Surname </th>";
        table += "<th>Gender </th><th>Department </th><th> </th></tr>";
        
        for(; i < obj.administrators.length; i++){
            if( i % 2 == 0 )
            table += '<tr class="row1">';
            else
              table += '<tr class="row1">';  
    
            table += '<td>'+ obj.administrators[i].admin_fname +'</td>';
            table += '<td>'+ obj.administrators[i].admin_sname +'</td>';
            table += '<td>'+ obj.administrators[i].gender +'</td>';
            table += '<td>'+ obj.administrators[i].department_name +'</td>';
            table += '<td class="modify">';
            table += '<span class="ti-pencil" onclick=update('+ obj.administrators[i].admin_id +')></span>';                        
            table += '<span class="ti-trash"  onclick=deleteAdmin('+ obj.administrators[i].admin_id +',this)></span></td></tr>';                       
        }          
        table += "</tbody></table>";        
        $('#livesearch').html(table);
        $('#livesearch').show();
    }
    
    function addRow(obj,fn,sn,g,d){
            var tableRow ="";
            tableRow += '<tr class="row1">';  
            tableRow += '<td>'+ fn +'</td>';
            tableRow += '<td>'+ sn +'</td>';
            tableRow += '<td>'+ g +'</td>';
            tableRow += '<td>'+ d +'</td>';
            tableRow += '<td class="modify">';
            tableRow += '<span class="ti-pencil" onclick=update('+ obj.id+')></span>';                        
            tableRow += '<span class="ti-trash"  onclick=deleteAdmin('+ obj.id+',this)></span></td></tr>';     
        
        $("#tableExample > tbody:last").after(tableRow);
    }

    
    function getAdminAdd(){
            $("#content_area").show();
            $("#content_area").load('administratorsadd.php');
    }
    
    function getAllAdmins() {       
        var obj = sendRequest("adminFunctions.php?cmd=7");
        if(obj.result == 1){
            displayAdmin(obj);
        }
    }
    
    function deleteAdmin(id,span){
        var obj = sendRequest("adminFunctions.php?cmd=5&id="+id);
        if(obj.result == 1){
            showStatus( obj);
            deleteRow(span);
            
        }else{
           showStatus(obj); 
        }
    }
    
    function deleteRow(span){
        var row = $(span).closest('tr');
            row.fadeOut(400, function(){
                    row.remove();
        });
    }
    
    function showStatus(obj){
        var message = "";
        if(obj.result == 0){
            message += '<div id="divStatus" class="error"  onclick=hideStatus()>';
            message += ''+obj.message+' <span class="ti-face-sad" ></span></div>';
        }else if(obj.result == 1){
            message += '<div id="divStatus" class="success"  onclick=hideStatus()>';
            message += ''+obj.message+' <span class="ti-face-smile" ></span></div>';
        }
        $('#status').html(message);
        $('#status').fadeIn(1000).fadeOut(2000);
    }
    
    function update(id){
        //alert(id);
        $("#content_area").slideDown();
        $("#content_area").load('adminUpdate.php?id='+id); 
    }
    
    function hideStatus(){
        $('#status').slideUp();
    }
    
</script>

<div class="container">

    <h1>Administrators</h1>
    <div id="dash">
        <span class=ti-plus onclick="getAdminAdd()"></span>
        <span class=ti-pencil onclick="getAllAdmins()"></span>
        <span class=ti-trash onclick="getAllAdmins()"></span>
        <div id="search">
            <input type="text" type="text" name="st" size="40" max-size="60" 
                   onkeyup="liveSearch(this.value)">
            <span class="ti-search"></span>
        </div>
    </div>
    
    

    <div id="status_content">
        <h2>status message 
            <span class="ti-arrow-circle-down" onclick="toggleStatus()">

            </span></h2>
        <div id="status"></div>                                        
    </div>
    
    <div id="divContent">
        <h2><span class="ti-angle-down" onclick="hideForm(0)"></span></h2>
        <div id="viewArea">
            <div id="content_area"></div>
        </div>

        <div id="displayArea">
            <div id="livesearch"></div>
        </div>
    </div>

</div>


